<template>
	<view class="tabbar-box" :style="{ 'padding-bottom': deviceType === 'android' ? '40rpx' : '' }">
		<view class="tabbar-box-item" v-for="(item, index) in tabbarList" @click="goPage(item)" :key="index">
			<button v-if="item.type=='add'" class="btn">+</button>
			<!-- 徽标 -->
			<up-badge type="error" v-for="v in badgeData" max="99" :key="index" :value="item.type === v.name ? v.number:0"
				:absolute="true" :offset="[2,-2]"></up-badge>
			<text :class="props.type === item.type ? 'active':''">
				{{ item.title }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	let deviceType = ref(''); //设备信息 （主要定制安卓机型的底部安全区）
	let length = ref('') //message 徽标
	onMounted(() => {
		deviceType.value = uni.getSystemInfoSync().osName;
		length.value = JSON.stringify(uni.getStorageSync('length'))
		console.log(length.value);
	});
	const badgeData = [{
			name: 'home',
			number: '0'
		},
		{
			name: 'city',
			number: '0'
		},
		{
			name: 'message',
			number: length.value
		},
		{
			name: 'mine',
			number: '0'
		},
	]
	const props = defineProps({
		type: {
			type: String,
			default: 'home',
		}
	});

	let tabbarList = ref([{
			title: '首页',
			type: 'home',
			path: '/pages/tab-index/index'
		},
		{
			title: '同城',
			type: 'city',
			path: '/pages/tab-same-city/index'
		},
		{
			title: '发布',
			type: 'add',
			path: '/pages/tab-publish-content/index',
			url: '../static/images/1101_03.png',
			activeUrl: '../static/images/1101_03.png'
		},
		{
			title: '消息',
			type: 'message',
			path: '/pages/tab-message/index',
		},
		{
			title: '我',
			type: 'mine',
			path: '/pages/tab-mine/index'
		}
	]);

	function goPage(item) {
		if (item.type == props.type) return;
		uni.switchTab({
			url: item.path,
		});
	}
</script>

<style lang="scss" scoped>
	.active {
		font-weight: 700;
		font-size: 40rpx;
		color: black !important;
	}
	.tabbar-box {
		z-index: 1000;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx;
		//底部安全区
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tabbar-box-item {
			position: relative;
			height: 70rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				left: 25rpx;
				// top: 0rpx;
			}
			font-size: 35rpx;
			font-weight: 500;
			color: #999999;
		}
	}

	.btn {
		font-size: 50rpx;
		width: 90rpx;
		height: 60rpx;
		background-color: rgb(255, 84, 106);
		color: white;
		line-height: 50rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
</style>